<template>
  <div class="profile-card">
    <div class="avatar-section">
      <div class="avatar-container">
        <img :src="user.avatar" alt="用户头像" class="avatar" />
        <div class="change-avatar">
          <input type="file" @change="$emit('avatar-change', $event)" accept="image/*" class="upload-avatar" />
          <i class="fa fa-camera"></i>
          <span>更换头像</span>
        </div>
      </div>
    </div>
    <div class="info-section">
      <div class="form-group" v-for="(value, key) in fields" :key="key">
        <label>{{ value.label }}</label>
        <input
          :type="value.type"
          :value="value.model"
          @input="$emit('update-field', { key, value: $event.target.value })"
          :disabled="value.readonly || !isEditing"
        />
      </div>
      <div>
        <button v-if="!isEditing" @click="$emit('edit')">编辑资料</button>
        <button v-else @click="$emit('save')">保存修改</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['user', 'userPosts', 'isEditing', 'editedUser'])
const emit = defineEmits(['avatar-change', 'edit', 'save', 'update-field'])

const fields = computed(() => ({
  username: { label: '用户名', model: props.user.username, type: 'text', readonly: true },
  nickname: { label: '昵称', model: props.editedUser.nickname, type: 'text' },
  userEmail: { label: '邮箱', model: props.editedUser.userEmail, type: 'email' },
  userPhone: { label: '手机号', model: props.editedUser.userPhone, type: 'text' },
  createdAt: { label: '注册日期', model: props.user.createdAt, type: 'text', readonly: true },
  userType: { label: '用户类型', model: props.user.userType === 'admin' ? '管理员' : '普通用户', type: 'text', readonly: true },
  points: { label: '总积分', model: props.user.points || 0, type: 'text', readonly: true },
  followingCount: { label: '关注数', model: props.user.followingCount || 0, type: 'text', readonly: true },
  postCount: { label: '帖子数', model: props.userPosts.length, type: 'text', readonly: true }
}))
</script>

<style scoped>
.profile-card {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.avatar-section {
  width: 200px;
  text-align: center;
}
.avatar-container {
  position: relative;
  display: inline-block;
}
.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}
.change-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}
.avatar-container:hover .change-avatar {
  opacity: 1;
}
.change-avatar i {
  font-size: 16px;
}
.change-avatar span {
  font-size: 10px;
  margin-top: 2px;
}
.info-section {
  flex: 1;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}
button {
  padding: 10px 15px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0b7dda;
}
.upload-avatar {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>
